import React from 'react';
import { Outlet, Link, useLocation } from 'react-router-dom';

const MainLayout: React.FC = () => {
    const location = useLocation();
    const pathnames = location.pathname.split('/').filter((x) => x);

    return (
        <div className="min-h-screen flex">
            {/* 侧边栏 */}
            <div className="w-64 bg-gray-800 text-white p-4">
                <nav className="space-y-2">
                    <Link 
                        to="/login" 
                        className="block px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-700 transition-colors"
                    >
                        首页
                    </Link>
                    <Link 
                        to="/form" 
                        className="block px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-700 transition-colors"
                    >
                        数据表单
                    </Link>
                    <Link 
                        to="/manage/soldierlist" 
                        className="block px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-700 transition-colors"
                    >
                        人员表格
                    </Link>
                    <Link 
                        to="/test" 
                        className="block px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-700 transition-colors"
                    >
                        ToDOList
                    </Link>
                    <Link 
                        to="/file" 
                        className="block px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-700 transition-colors"
                    >
                        文件上传
                    </Link>
                </nav>
            </div>
            {/* 主内容区域 */}
            <div className="flex-1 flex flex-col">
                {/* 顶部导航栏 */}
                <div className="bg-blue-600 text-white p-4">
                    <div className="flex items-center space-x-2">
                        <Link to="/" className="hover:text-gray-200">
                            首页
                        </Link>
                        {pathnames.map((value, index) => {
                            const to = `/${pathnames.slice(0, index + 1).join('/')}`;
                            const isLast = index === pathnames.length - 1;
                            return isLast ? (
                                <span key={to} className="font-medium">
                                    / {value}
                                </span>
                            ) : (
                                <Link key={to} to={to} className="hover:text-gray-200">
                                    / {value}
                                </Link>
                            );
                        })}
                    </div>
                </div>
                {/* 主要内容 */}
                <div className="flex-1 p-4">
                    <Outlet />
                </div>
                {/* 底部 */}
                <div className="bg-gray-800 text-white p-4">
                    Footer
                </div>
            </div>
        </div>
    );
};

export default MainLayout;